<!--
 * @Author: cest cestrmail@163.com
 * @Date: 2022-12-12 08:14:30
 * @LastEditors: cest cestrmail@163.com
 * @LastEditTime: 2022-12-13 09:51:47
 * @FilePath: /ithome-lite/src/pages/tab/news.vue
 * @Description: news
-->
<template>
  <div class="container">
    <swiper
      class="slider-wrap"
      indicator-dots
      autoplay
      circular
      indicator-color="rgba(255, 255, 255, .3)"
      indicator-active-color="rgba(210, 34, 34, .7)"
    >
      <swiper-item v-for="(slide, index) of slides" :key="index" @click="() => turn(slide.link)">
        <div class="slider-title">{{ slide.title }}</div>
        <img :src="slide.image" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <div class="news-wrap">
      <NewsItem v-for="item of newsList" :news="item" :key="item.id"></NewsItem>
    </div>
    <div class="nomore">只给看这么多</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import xml2json from 'xmlstring2json'
import NewsItem from '@/components/NewsItem.vue'
import { formatSlideList, formatNewsList } from '@/utils'
import { getNewsList, getSlides } from '@/utils/api'
import { onPullDownRefresh } from '@dcloudio/uni-app'

const turn = (ctx: any) => {
  console.log(ctx)
}

/**
 * 获取 slides
 */

const slides: Array<Models.Slide> = reactive([])
const getSlidesAsync = async () => {
  const _slides = await getSlides()
  if (!_slides) return
  const parsedSlides: Array<Models.News> = xml2json(_slides).rss.channel.item
  const filterSlides: Array<Models.News> = parsedSlides.filter(slide => slide.opentype['#text'] === '1')
  const formatSlides: Array<Models.Slide> = filterSlides.map(formatSlideList)
  console.log('getSlidesAsync:', formatSlides)
  slides.length = 0
  slides.push(...formatSlides)
}

/**
 * 获取 newsList
 */
const newsList: Array<ComponentModels.NewsItem> = reactive([])
const getNewsListAsync = async (init: boolean) => {
  const news = await getNewsList()
  if (!news) return

  const _newsList: Array<Models.NewsContent> = news.newslist
  const _formatNewsList = _newsList.map(formatNewsList)
  console.log('getNewsListAsync:', _formatNewsList)
  newsList.length = 0
  newsList.push(..._formatNewsList)
}

/**
 * 页面初始化
 */

const init = async () => {
  uni.showNavigationBarLoading()
  await Promise.all([getSlidesAsync(), getNewsListAsync(true)])
  uni.hideNavigationBarLoading()
}
init()

/**
 * 下拉刷新
 */
onPullDownRefresh(() => {
  const options: UniNamespace.StartPullDownRefreshOptions = {
    success() {},
    fail() {},
    complete() {}
  }
  uni.startPullDownRefresh(options)
  init()
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
.slider-wrap {
  width: 100%;
  height: 200px;
}

.slider-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.slider-title {
  max-width: 90vw;
  position: absolute;
  top: 10px;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 2px 6px;
  font-size: 18px;
}

.slider-img {
  width: 100%;
  height: 200px;
}

.news-wrap {
  padding: 0 10px;
}

.nomore {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #ddd;
}
</style>
